<div class="machine-volumes">
  <div flex>
    <!-- Machine volume header -->
    <div flex layout="column" md-theme="maincontent-theme">
      <che-list-header che-add-button-title="Add Volume"
                       che-on-add="machineVolumesController.showEditDialog()"
                       che-hide-add="machineVolumesController.isToolContainer"
                       che-delete-button-title="Delete"
                       che-on-delete="machineVolumesController.deleteSelectedMachineVolumes()"
                       che-hide-delete="machineVolumesController.cheListHelper.isNoItemSelected"
                       che-hide-header="machineVolumesController.cheListHelper.visibleItemsNumber === 0">
        <div flex="100"
             layout="row"
             layout-align="start stretch"
             class="che-list-item-row">
          <!-- Checkbox -->
          <div layout="column" layout-align="center center" class="che-list-item-checkbox">
            <md-checkbox class="che-list-item-checkbox"
                         aria-label="All machine volumes"
                         md-theme="default"
                         ng-checked="machineVolumesController.cheListHelper.areAllItemsSelected === true"
                         ng-click="machineVolumesController.cheListHelper.changeBulkSelection()"></md-checkbox>
          </div>
          <div flex layout="row" layout-align="start center" class="che-list-item-details">
            <che-list-header-column flex="30" layout="column" layout-align="center start"
                                    che-sort-value="machineVolumesController.machineVolumeOrderBy"
                                    che-sort-item="name"
                                    che-column-title="Name"></che-list-header-column>

            <che-list-header-column flex="60" layout="column" layout-align="center start"
                                    che-sort-value="machineVolumesController.machineVolumeOrderBy"
                                    che-sort-item="path"
                                    che-column-title="Path"></che-list-header-column>

            <che-list-header-column flex="10" layout="column" layout-align="center end"
                                    che-column-title="Actions"></che-list-header-column>
          </div>
        </div>
      </che-list-header>
      <div ng-if="machineVolumesController.cheListHelper.visibleItemsNumber === 0" class="che-list-empty">
        <span>There are no volumes defined for this container.</span>
      </div>
      <!-- Machine volume list -->
      <che-list class="machine-volume-list" flex
                ng-show="machineVolumesController.cheListHelper.visibleItemsNumber > 0">
        <div class="machine-volume-item"
             ng-repeat="machineVolume in machineVolumesController.cheListHelper.getVisibleItems() | orderBy:machineVolumesController.machineVolumeOrderBy"
             id="machine-volume-name-{{machineVolume.name}}">
          <che-list-item flex>
            <div flex="100"
                 layout="row"
                 layout-align="start stretch"
                 class="che-list-item-row">
              <!-- Checkbox -->
              <div layout="column" layout-align="center center" class="che-list-item-checkbox">
                <md-checkbox aria-label="Machine-Volumes-{{machineVolume.name}}"
                             ng-model="machineVolumesController.cheListHelper.itemsSelectionStatus[machineVolume.name]"
                             ng-change="machineVolumesController.cheListHelper.updateBulkSelectionStatus()"></md-checkbox>
              </div>
              <div flex layout="row" layout-align="start center">
                <!-- Name -->
                <div flex="30">
                  <span class="che-list-item-name" variable-name="{{machineVolume.name}}">{{machineVolume.name}}</span>
                </div>
                <!-- Path -->
                <div flex="60">
                  <div class="che-list-item-name">
                    <span variable-value="{{machineVolume.path}}">{{machineVolume.path}}</span>
                  </div>
                </div>
                <!-- Actions -->
                <div flex="10" layout="column" layout-align="center end" class="machine-volume-actions">
                  <div flex layout="row">
                    <div ng-click="machineVolumesController.showEditDialog(machineVolume.name)" edit-variable="{{machineVolume.name}}">
                      <span class="fa fa-pencil"></span>
                    </div>
                    <div ng-click="machineVolumesController.deleteMachineVolume(machineVolume.name)" delete-variable="{{machineVolume.name}}">
                      <span class="fa fa-trash-o"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </che-list-item>
        </div>
      </che-list>
    </div>
  </div>
</div>
